﻿@{
    ViewBag.Title = "Users";
}

<h2>Users</h2>

<table id="userTable" class="table table-striped table-responsive">
    <thead>
        <tr>
            <td>First name</td>
            <td>Last name</td>
            <td>Email</td>
            <td>Number</td>
            <td>Role</td>
            <td>ISP</td>
            <td>Champ Coverage</td>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

@section scripts{
    <script type="text/javascript">
        $(function () {
            var userTable = $('#userTable').DataTable({
                "paging": true,
                "serverSide": true,
                "ajax": {
                    "type": "POST",
                    "url": '@Url.Action("UserDataHandler")',
                    "contentType": 'application/json; charset=utf-8',
                    'data': function (data) { return data = JSON.stringify(data); }
                },
                "processing": true,
                "deferRender": true,
                "columns": [
                    { "data": "FirstName" },
                    { "data": "LastName" },
                    { "data": "Email" },
                    { "data": "PhoneNumber" },
                    { "data": "Role" },
                    { "data": "ISPName" },
                    { "data": "ChampCoverage" }
                ],
                "order": [0, "asc"]
            });
        });
    </script>
}